<template>
  <div class="home-container">
    <h1>欢迎来到校园活动管理系统</h1>
    
    <nav class="nav-menu">
      <ul>
        <li><router-link to="/public-activities">公开活动列表</router-link></li>
        <li v-if="isAdmin"><router-link to="/activity-management">活动管理</router-link></li>
      </ul>
    </nav>
    
    <div class="content">
      <h2>系统简介</h2>
      <p>这是一个校园活动管理平台，您可以浏览、查询以及管理校园内的各类活动信息。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false
    }
  },
  mounted() {
    const userRole = localStorage.getItem('userRole')
    this.isAdmin = userRole === 'admin'
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.nav-menu {
  margin: 20px 0;
}

.nav-menu ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 15px;
}

.nav-menu li {
  display: inline;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-menu a:hover {
  background-color: #f0f0f0;
}

.content {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 4px;
}
</style>